<template>
  <div class="bgUpdate">
    <el-upload ref="upload" class="upload-demo" drag :action="`${store.state.BaseUrl}message/messageImg`"
      style="width: 300px;" :show-file-list="false" :on-success="handleSuccess">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          留言背景：尽量小一点的图片
        </div>
      </template>
    </el-upload>
    <el-image style="width: 320px;height: 196px; margin-left: 30px;" :src="frontBg" fit="cover" />
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
import type { UploadFile, UploadFiles } from 'element-plus'

import { UploadFilled } from '@element-plus/icons-vue'
const store: any = inject('store')
// 图片上传成功后的回调 底部码
const frontBg = ref('')
store.state.BaseUrl && (frontBg.value = store.state.BaseUrl + 'frontUploads/messageImage.jpg')
const handleSuccess = (res: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  const reader = new FileReader();
  reader.readAsDataURL(uploadFile.raw as any);
  reader.onload = () => {
    const src = reader.result;
    // 这里的reader.result就是文件的base64了。如果是图片的话，就可以直接放到src中展示了
    frontBg.value = src as string
  };
}
</script>

<style lang="scss" scoped>
.bgUpdate {
  width: 100%;
  display: flex;
  margin-top: 20px;
}
</style>